<template>
	<li>
		<div @dblclick="changeNodeType">
			<span :class="{'font-bold': props.model.children}">{{props.model.name}}</span>
			<span v-show="props.model.children && props.model.children.length">
				<span @click="props.model.collapse=!props.model.collapse">[{{props.model.collapse ? '+' : '-'}}]</span>
			</span>
		</div>
		<ul v-show="!props.model.collapse">
			<TreeItem v-for="item in props.model.children" :key="item" :model="item"></TreeItem>
			<li v-show="props.model.children">
				<i class="icon-plus" @click="addChild">+</i>
			</li>
		</ul>
	</li>
</template>

<script setup>
	import {ref, computed, onMounted} from 'vue'
	const props = defineProps({
		model: Object,
	})
	
	onMounted(()=>{
		console.log('props', props.model)
	})
	
	const addChild = () => {
		props.model.children.push({name:'new staff'})
	}
	
	const changeNodeType = () => {
		props.model.children = []
	}
	
</script>

<style scoped>
	ul li{
		text-align: left;
	}
	.font-bold{
		font-weight: bold;
	}
</style>